@include('Admin.public.head')
<body>
<style type="text/css">
    #my-popup {
        max-height: 360px;
        overflow: auto;
    }

     #my-popups {
       max-height: 500px;
        overflow: auto;
        width: 977px;
        left: 40%;
    }

    #opend-p {
        margin-left: 25%;
        margin-top: 2.5%;
    }

    #inventory-popus {
        display: flex;
        justify-content: space-between;
    }

     #inventory-popuss {
        display: flex;
        justify-content: space-between;
    }

    #inventory-popus div {
        width: 20%;
        text-align: center;
        /*float: left;*/
        /*margin-right: 35px;*/
        /*margin-left: 10%;*/
    }

    #inventory-popuss div.zuo {
        width: 20%;
        text-align: center;
        /*float: left;*/
        /*margin-right: 20px;*/
        /*width: 95px;*/
        /*width: 190px;*/
        /*margin-left: 10%;*/
    }

   #inventory-popuss div.zuo_name {
        height: 60px
    }

    #inventory-popuss div input {
        width: 65px;
        border: none;
        background: #f8f8f8;
        outline: none;
        margin: 0 auto;
    }

    #inventory-popuss .sub-specs {
        height: 30px;
    }

    #inventory_set {
        margin-left: 20%;
        margin-top: 2%;
        margin-bottom: 3%;
    }

    .specs_text {
        width: 527px;
        margin-top: 20px;
        /*height: 99px;*/
        border-radius: 5px;
        border: navajowhite;
        background: #f8f8f8;
    }

    .tjlanmu .zuo {
        width: 24%;
    }

    .tjlanmu .you {
        width: 75%;
    }

    .am-popup-bd {
        padding: 0;
    }

    .am-popup {
        width: 900px;
    }

    .sub-cf {
        font-size: 12px;
        /*color: #cccccc;*/
    }
    .box2 .content {
        display: flex;
    }
    .box2 .content .zuo_name {
        margin-left: 15px;
        line-height: 41px;
    }
</style>
<body>
@include('Admin.public.menu')
<!-- 引入样式 -->
{{--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">--}}
<div class=" admin-content" id="app">
    {{ csrf_field() }}
    <div class="daohang">
        <ul>
            <li>
               <button type="button" class="am-btn am-btn-default am-radius am-btn-xs"> 首页</button>
            </li>
            <li>
                <button type="button" class="am-btn am-btn-default am-radius am-btn-xs">帮助中心<a
                            href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a>
                </button>
            </li>
            <li>
                <button type="button" class="am-btn am-btn-default am-radius am-btn-xs">奖金管理<a
                            href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a>
                </button>
            </li>
            <li>
                <button type="button" class="am-btn am-btn-default am-radius am-btn-xs">产品管理<a
                            href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a>
                </button>
            </li>
        </ul>
    </div>

    <!--添加模态框-->
    <div class="am-popup am-popup-inner" id="my-popup">
        <div class="am-popup-hd">
            <h4 class="am-popup-title">设置商品库存及其门店编号</h4>
            <span data-am-modal-close
                  class="am-close">&times;</span>
        </div>
        <div class="am-popup-bd">
        <form class="am-form tjlanmu" method="POST">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="am-form-group am-cf" v-for="val in goods" v-if="!val.specs">
                    <div class="zuo">@{{ val.goodsname }}：</div>
                    <div class="you">
                        <input type="text" class="am-form-field" v-model="val.number" name="name" placeholder="请输入库存">
                    </div>
                </div>
                <div class="am-form-group am-cf" v-for="(val,index) in goods" v-if="val.specs">
                <div class="am-form-group am-cf">
                <div class="zuo">@{{ val.goodsname}}：</div>
                        <div class="you">
                            <input type="text" class="am-form-field" style="width: 88%;margin-right: 1%;float: left"  v-model="val.number" name="name"
                                   placeholder="请输入库存" disabled>
                            <button type="button" style="height: 40px;padding: 0 15px;float: left"
                                    class="am-btn am-btn-success am-radius" :class="'fromtitle'+index" @click="fromSub(index)">展开
                            </button>
                        </div>
                    </div>
                    <div class="am-form-group am-cf sub-cf" v-for="item in val.specs" :class="'subFrom'+index" v-show="val.flag">
                    <div class="zuo">@{{ ">"+val.goodsname+item.specs }}：</div>
                        <div class="you">
                            <input type="text" class="am-form-field" v-model="item.number" name="name"
                                   placeholder="请输入库存">
                        </div>
                    </div>
                </div>
                <div class="am-form-group am-cf">
                    <div class="zuo">报单编号前缀：</div>
                    <div class="you">
                        <input type="text" class="am-form-field" id="stores_number" placeholder="请输入门店编号地区前缀">
                    </div>
                </div>
                <div class="am-form-group am-cf">
                    <div class="zuo">门店订金：</div>
                    <div class="you">
                        <input type="number" class="am-form-field" id="earnest_money" placeholder="请输入门店定金">
                    </div>
                </div>
                <div class="am-form-group am-cf">
                <div class="zuo">库存总价：</div>
                    <div class="you">
                    <input type="text" class="am-form-field" name="name" placeholder="请输入库存" :value="newPrice"
                               disabled>
                    </div>
                </div>
                <div class="am-form-group am-cf">
                    <div class="you">
                        <p id="opend-p">
                        <button type="button" class="am-btn am-btn-success am-radius" v-on:click="open()">立即开通
                            </button>
                            {{--<button type="reset" class="am-btn am-btn-success am-radius">重新填写</button>--}}
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!--添加模态框1-->
    <div class="am-popup am-popup-inner" id="my-popups">
        <div class="am-popup-hd">
            <h4 class="am-popup-title">查看门店库存</h4>
            <span data-am-modal-close
                  class="am-close">&times;</span>
        </div>
        <div class="am-popup-bd">
            <div class="am-form-group am-cf" id="inventory-popus">
            <div class="zuo">商品名称</div>
                <div class="zuo">剩余商品库存量</div>
                <div class="zuo">已售商品数量</div>
                <div class="zuo">规格</div>
                <div class="zuo">添加/减少</div>
            </div> 
            <div class="box" v-for="(val,index) in storegoods" :key="index">
                <div class="am-form-group am-cf" id="inventory-popuss">
                <div class="zuo zuo_name">@{{ val.goodsname }}</div>
                <div class="zuo zuo_name">@{{ val.inventory }}</div>
                <div class="zuo zuo_name">@{{ val.sold }}</div>
                <div class="zuo zuo_name">/
                </div>
                <div class="zuo zuo_name" v-if="val.specs_txt">
                        <button type="button" style="height: 40px;padding: 0 15px"
                                class="am-btn am-btn-success am-radius" :class="'title'+index" @click="showSub(index)">展开
                        </button>
                </div>
                <div class="zuo zuo_name" v-if="!val.specs_txt"><input type="number" class="am-form-field"
                                                                           v-model="val.revise"></div>
                </div>
                <div class="am-form-group am-cf sub-specs" :class="'show-sub'+index" id="inventory-popuss" @click="test(index)"
                     v-show="showflag" style="font-size: 14px;height: 40px" v-for="(item,inde) in val.specs_txt" :key="inde">
                    <div class="zuo zuo_name" style="padding-left: 10px;">@{{ '>'+val.goodsname }}</div>
                    <div class="zuo zuo_name">@{{ item.number }}</div>
                    <div class="zuo zuo_name">/</div>
                    <div class="zuo zuo_name">
                        <span v-for="type in item.specs">
                            @{{ type }}
                        </span>
                    </div>
                    <div class="zuo zuo_name"><input type="number" class="am-form-field" v-model="item.revise"></div>
                </div>         
            </div> 
            <div class="box2" >
                <div class="am-form-group am-cf content">
                    <div class="zuo zuo_name" style="font-weight: bold">门店定金:</div>
                    <div class="zuo zuo_name">
                            <input type="number" class="am-form-field" v-model="earnest_money"  placeholder="请入门店定金">

                    </div>
                </div>
            </div>
            <div class="am-form-group am-cf">
                    <div class="you">
                        <p id="opend-p">
                        <button type="button" class="am-btn am-btn-success am-radius" v-on:click="storeGoodsSet()"
                                id="inventory_set">确认提交
                        </button>
                        </p>
                    </div>
            </div>
        </div>
    </div>
    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-users"> 门店中心</ul>
            <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">门店列表</a></dl>
            <!--这里打开的是新页面-->
        </div>
         <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
           <ul>
               <li>
                   <template>
                       <el-select v-model="keyword.type" placeholder="门店状态">
                           <el-option
                                   size="medium"
                                   v-for="val,index in type"
                                   :key="index"
                                   :label="val.label"
                                   :value="val.value">
                           </el-option>
                       </el-select>
                   </template>
               </li>
               <li>
                   <el-input v-model="keyword.keyword" class="keywords" placeholder="关键词搜索"></el-input>
               </li>
               <li>
                   <el-button type="primary" v-on:click="changeClick()">搜索</el-button>
               </li>
               <li>
                   <el-button type="success" v-on:click="exportUser()">导出</el-button>
               </li>
               <li>
                   <el-button type="danger" v-on:click="resetOrder()">重置</el-button>
               </li>
           </ul>
       </div>
   

        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">
                    <th class="table-id">#id</th>
                    <th class="table-title">门店名称</th>
                    <th class="table-title">报单编号</th>
                    <th class="table-title">申请人</th>
                    <th class="table-title">联系电话</th>
                    <th class="table-title">省</th>
                    <th class="table-title">市</th>
                    <th class="table-title">区</th>
                    <th class="table-title">地址</th>
                    <th class="table-title">经纬度</th>
                    <th class="table-title">评分</th>
                    <th class="table-title">门店订金</th>
                    <th class="table-title">状态</th>
                    <th class="table-title">申请时间</th>
                    <th class="table-title">审核时间</th>
                    <th width="130px" class="table-set">操作</th>
                </tr>
                </thead>
                <tbody>
                    <tr v-for="val,index in stores">
                        <td>@{{val.id}}</td>
                        <td>@{{val.shop_name}}</td>
                        <td>@{{val.number}}</td>
                        <td>@{{val.name}}</td>
                        <td>@{{val.phone}}</td>
                        <td>@{{val.province}}</td>
                        <td>@{{val.city}}</td>
                        <td>@{{val.district}}</td>
                        <td>@{{val.address}}</td>
                        <td>@{{val.latitude}}</td>
                        <td>@{{val.score}}</td>
                        <td>@{{val.earnest_money}}</td>
                        <td>
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs" v-show="val.type == 0">
                                    <code>申请中</code>
                                </div>
                                <div class="am-btn-group am-btn-group-xs" v-show="val.type == 1">
                                    <code>已通过</code>
                                </div>
                                <div class="am-btn-group am-btn-group-xs" v-show="val.type == 2">
                                    <code>已驳回</code>
                                </div>
                                <div class="am-btn-group am-btn-group-xs" v-show="val.type == 3">
                                    <code>已回收</code>
                                </div>
                                <div class="am-btn-group am-btn-group-xs" v-show="val.type == -1">
                                    已删除
                                </div>
                            </div>
                        </td>
                        <td>@{{val.apply_time}}</td>
                        <td>@{{val.audit_time}}</td>
                        <td style="width:250px;">
                            <div class="am-btn-toolbar">

                                <div class="am-btn-group am-btn-group-xs">

                                <a v-on:click="findsMember(val.id,index)" v-show="val.type == 0"
                                   class="am-btn am-btn-success am-radius"
                                   data-am-modal="{target: '#my-popup', closeViaDimmer: 1, width: 400, height: 800}"
                                        title="通过">通过</a>
                                        <a v-on:click="modify(val.id,index,2)" v-show="val.type == 0"
                                   class="am-btn am-btn-success am-radius"
                                        title="驳回">驳回</a>
                                        <a v-on:click="modify(val.id,index,3)" v-show="val.type == 1"
                                   class="am-btn am-btn-success am-radius"
                                        title="回收">回收</a>
                                        <a v-on:click="modify(val.id,index,1)" v-show="val.type == 3"
                                   class="am-btn am-btn-success am-radius"
                                        title="重新开通">重新开通</a>
                                        <a v-on:click="inventory(val.id)" v-show="val.type == 1"
                                   class="am-btn am-btn-success am-radius"
                                   data-am-modal="{target: '#my-popups', closeViaDimmer: 1, width: 400, height: 800}"
                                   title="点击查看">门店库存</a>
                                </div>

                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!--分页-->
            <ul class="am-pagination am-fr">
                <div class="block">
                    <el-pagination
                            background
                            :page-size="PagesData.per_page"
                            :current-page="PagesData.current_page"
                            layout="total , prev, pager, next"
                            :total="PagesData.total"
                            @prev-click="changeClick"
                            @next-click="changeClick"
                            @current-change="changeClick">
                    </el-pagination>
                </div>
            </ul> 
        </form>
        <!-- 引入组件库 -->
        {{--<script src="https://unpkg.com/element-ui/lib/index.js"></script>--}}
        <script type="text/javascript">
           function storeGoods() {
                console.log($(this).val());
            }

            function specsShow(e) {
                var is_show = $('#specs-btn' + e).attr("is-show");
                if (is_show == 0) {
                    $('#specs-btn' + e).attr("is-show", 1);
                    $('#specs-btn' + e).val("点击收起");
                    $('#specs-btn' + e).parent().siblings('.specs_div').show();
                } else {
                    $('#specs-btn' + e).attr("is-show", 0);
                    $('#specs-btn' + e).val("点击查看");
                    $('#specs-btn' + e).parent().siblings('.specs_div').hide();
                }
            }
        </script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    earnest_money:'', //门店定金
                    flag1:false,
                    type: [{
                        value: '0',
                        label: '待审核'
                    }, {
                        value: '1',
                        label: '已通过'
                    }, {
                        value: '2',
                        label: '已驳回'
                    }, {
                        value: '3',
                        label: '已回收'
                    }],
                    stores: [],
                    storegoods: {},
                    specs_txt: [],
                    goods: [],
                    id: '',
                    store_id: 0,
                    index: '',
                    PagesData: [],//分页
                    pase: '',
                    keyword: { //关键字搜索
                        type: '',
                        keyword: '',
                    },
                    oldPrice: '',
                    flag: [],
                    showflag: false
                    // newPrice: '400'
                },
                computed: {
                    newPrice: function () {
                        var price = 0
                        this.goods.forEach(function (item) {
                            //price += item.rulingprice * item.number
							price +=parseInt(item.rulingprice) * parseInt(item.number)
                            if (item.specs) {
                                item.specs.forEach(function (val) {
                                    price += item.rulingprice * val.number
                                })
                            }
                        })
                        return price
                    }
                },
                watch: {
                    index: function (val) {
                        this.oldPrice = this.stores[val].earnest_money
                    },
                },
                //事件
                methods: {
                    fromSub(index){
                        var fromName = '.subFrom'+index
                        var fromTitle = '.fromtitle'+index
                        $(fromName).slideToggle()
                        if (this.goods[index].flag) {
                            $(fromTitle).text('展开')
                        }else {
                            $(fromTitle).text('收起')
                        }
                        this.goods[index].flag = !this.goods[index].flag


                        console.log(index)
                    },
                    showSub(index) {
                        var name = '.show-sub'+index
                        var title = '.title'+index
                        $(name).slideToggle()

                        this.storegoods[index].flag = !this.storegoods[index].flag
                        if(this.storegoods[index].flag) {
                            $(title).text('收起')
                        }else {
                            $(title).text('展开')
                        }
                        // console.log(this.storegoods[index])
                        // this.showflag = this.storegoods[index].flag
                    },
                    test(index) {
                        console.log('测试')
                        console.log(this.flag[index])
                    },
                    //选择当前页
                    changeClick: function (e) {
                        var rico = this
                        $.get("/admin/stores/stores", {
                            '_token': '{{csrf_token()}}',
                            class: 'select',
                            page: e,
                            keyword: app.keyword
                        }, function (res) {
                            if (res.code) {
                                app.stores = res.data.data;
                                app.PagesData = res.data;
                                app.goods = res.goods;
                                app.goods.forEach(function (item) {
                                    item.flag = false
									console.log(item)
                                })
                                for (var i = 0; i < app.stores.length; ++i) {
                                    app.stores[i].apply_time = rico.formatDateTime(app.stores[i].apply_time)
                                    app.stores[i].audit_time = rico.formatDateTime(app.stores[i].audit_time)
                                }
                            }
                        });
                    },
                    initialize: function () {
                        var rico = this
                        $.post("/admin/stores/stores", {
                            '_token': '{{csrf_token()}}',
                            class: 'select',
                        }, function (res) {
                            if (res.code) {
                                app.stores = res.data.data;
                                app.PagesData = res.data
                                app.pase = res.data.current_page;
                                app.goods = res.goods;
                                for (var i = 0; i < app.stores.length; ++i) {
                                    app.stores[i].apply_time = rico.formatDateTime(app.stores[i].apply_time)
                                    app.stores[i].audit_time = rico.formatDateTime(app.stores[i].audit_time)
                                }
                            }
                        });
                    },
                    //审核
                    open: function () {
                        for (var i = 0; i < app.goods.length; ++i) {
                            if (app.goods[i].number < 0) {
                                layer.msg('商品库存不能为空!');
                                return false;
                            }
                        }
                        var stores_number = $("#stores_number").val();
                        var earnest_money = $("#earnest_money").val();
                        /*if( stores_number == '' ){
                            layer.msg('请输入门店编号地区前缀!');return false;
                        }*/
                        $.post("/admin/stores/stores", {
                            '_token': '{{csrf_token()}}',
                            class: 'set',
                            goods: app.goods,
                            id: app.id,
                            number: stores_number,
                            earnest_money: earnest_money
                        }, function (res) {
                            if (res.code) {
                                $("#my-popup").modal("close");
                                layer.msg('设置成功');
                                window.location.href = "";
                                //app.stores[app.index].number = res.data;

                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    //查看门店库存
                    inventory: function (id) {
                        app.store_id = id;
                        $.post("/admin/stores/stores", {
                            '_token': '{{csrf_token()}}',
                            class: 'see_inventory',
                            id: id
                        }, function (res) {
                            if (res.code) {
                                app.storegoods = res.data;
                                app.storegoods.forEach(function (item) {
                                    item.flag = false
                                })
                                app.earnest_money = res.earnest_money

                                // app.storegoods[2].specs_txt = app.storegoods[4].specs_txt
                                // console.log(app.storegoods)
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    storeGoodsSet: function () {
                        if (app.store_id == 0) {
                            layer.msg('修改门店id不能为空!');
                            return false;
                        }
                        if (app.flag1) return false
                        app.flag1 = true
                        $.post("/admin/stores/stores", {
                            '_token': '{{csrf_token()}}',
                            class: 'storeGoodsSet',
                            storegoods: app.storegoods,
                            stores_id: app.store_id,
                            earnest_money:app.earnest_money
                        }, function (res) {
                            if (res.code) {
                                $("#my-popup").modal("close");
                                window.location.href = "";
                                layer.msg('设置成功', {
                                    end: function () {
                                        app.flag1 = false
                                    }
                                });
                            } else {
                                layer.msg(res.data, {
                                    end: function () {
                                        app.flag1 = false
                                    }
                                });
                            }
                        });
                    },
                    modify: function (id, index, type) {
                        $.post("/admin/stores/stores", {
                            '_token': '{{csrf_token()}}',
                            class: 'modify',
                            type: type,
                            id: id,
                        }, function (res) {
                            if (res.code) {
                                layer.msg('设置成功');
                                app.stores[index].type = type;
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    formatDateTime: function (timeStamp) {
                        var date = new Date();
                        date.setTime(timeStamp * 1000);
                        var y = date.getFullYear();
                        var m = date.getMonth() + 1;
                        m = m < 10 ? ('0' + m) : m;
                        var d = date.getDate();
                        d = d < 10 ? ('0' + d) : d;
                        var h = date.getHours();
                        h = h < 10 ? ('0' + h) : h;
                        var minute = date.getMinutes();
                        var second = date.getSeconds();
                        minute = minute < 10 ? ('0' + minute) : minute;
                        second = second < 10 ? ('0' + second) : second;
                        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
                    },
                     //重置
                    resetOrder: function () {
                        location.reload();
                    },
                    //导出
                    exportUser: function () {
                        location.href = "/admin/stores/exportStore?type=" + app.keyword.type + '&keyword=' + app.keyword.keyword;
                    },
                    findsMember: function (id, index) {
                        app.id = id
                        app.index = index
                    },
                },
                //自动执行
                mounted: function () {
                    this.initialize();//分公司
                },
            })
        </script>
@include('Admin.public.foot')